import { DownOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, theme, Divider, Radio, Modal, Table, Space, Tag, Checkbox, Pagination, Switch, message } from 'antd';
import React, { useState, useContext, useEffect } from 'react';
import mycontext from '../../../../utils/myContext';
import http from '../../../../utils/fetchHttp';
import "./index.scss"

let father;
let store//表格编辑对象
let promptBox, promptBoxMethod//删除提示框
let detailBox, detailBoxMethod//查看提示框
let setListData;//表格数据渲染方法
let queryDataId;//查询id
let queryAllDataList;//查询所有数据
let dataId;//删除数据公用Id
let productDetail//商品详情

const CommodityHome = (props) => {
    store = useContext(mycontext)
    queryDataId = store.promotionProductIdObj.promotionId
    //删除模态框
    const [isModalOpen, setIsModalOpen] = useState(false);
    promptBox = isModalOpen;
    promptBoxMethod = setIsModalOpen;
    //查看模态框
    const [detailModal, setDetailModal] = useState(false)
    detailBox = detailModal;
    detailBoxMethod = setDetailModal;

    const { token } = theme.useToken();
    const listStyle = {
        textAlign: 'center',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        marginTop: 16,
    };
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };
    const [selectionType, setSelectionType] = useState('checkbox');




    //表格
    const columns = [
        {
            title: '序号',
            dataIndex: 'productID',
            key: 'productID',
            width: 60,
            align: 'center'
        },
        {
            title: '商品图片',
            dataIndex: 'productUrl',
            key: 'productUrl',
            align: 'center',
            width: 120
        },
        {
            title: '商品名称',
            dataIndex: 'productName',
            key: 'productName',
            align: 'center',
        },
        {
            title: '货号',
            dataIndex: 'productID',
            key: 'productID',
            align: 'center',
            width: 120
        },
        {
            title: '价格',
            dataIndex: 'productPrice',
            key: 'productPrice',
            align: 'center',
            width: 120
        },
        {
            title: '分类',
            dataIndex: 'productClassify1',
            key: 'productClassify1',
            align: 'center',
        },
        {
            title: '库存',
            dataIndex: 'productNum',
            key: 'productNum',
            align: 'center',
        },
        {
            title: '是否上架',
            dataIndex: 'productGrounding',
            key: 'productGrounding',
            render: (_, record) => (
                <Switch
                    checked={record.productGrounding}
                    disabled
                >
                </Switch>
            ),
            align: 'center',
            width: 100
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { detail(record) }}>查看</a>
                    <a onClick={() => { delData(record) }}>删除</a>
                </Space>
            ),
        },
    ];

    //查询所有数据
    const queryAllData = () => {
        const dataObj = {
            promotionId: queryDataId
        }
        http({
            url: '/promotion/getProductDataId',
            method: 'post',
            data: dataObj
        }).then((res) => {
            if (res.code === 200) {
                console.log(res.data);
                setListData(res.data);
            }
        }).catch(() => {
            message.error('请求错误');
        })
    }
    queryAllDataList = queryAllData
    useEffect(() => {
        queryAllData(),
            queryAllDataList
    }, [])

    const [data, setData] = useState([])
    const [detailData, setDetailData] = useState({})
    setListData = setData

    //点击查看
    const detail = (val) => {
        setDetailData(val)
        console.log(val);
        detailBoxMethod(true)
    }
    //点击删除
    const delData = (val) => {
        console.log(val.productPromotionid, 'val.promotionId');
        dataId = val.productPromotionid
        promptBoxMethod(true)
    }
    // 选择的数组
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    // //跳转页面
    // const { getCount } = father;
    // const gotoCommodityHome = () => {
    //     const value = 2
    //     console.log('重新加载promotionHome');
    //     getCount(value);
    // };

    //删除模态框
    const handleOk = () => {
        const id = {
            id: dataId
        }
        console.log(id);
        http({
            url: '/promotion/delProductData',
            method: 'post',
            data: id
        }).then(res => {
            console.log(res);
            if (res.code === 200) {
                message.success('数据删除成功');
                queryAllDataList()
            }
        }).catch(() => {
            message.error('请求错误');

        })
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //查看模态框
    const detailOk = () => {
        setDetailModal(false)
    }
    const detailCancel = () => {
        setDetailModal(false)
    }

    //跳转赋值
    father = props

    const { getCount } = props;
    const goBack = () => {
        const value = 0
        getCount(value);
    };
    const gotoAdd = () => {
        const value = 3
        getCount(value);
    }
    return (
        <div className='commodityHomeBox'>
            <div style={listStyle}>
                <div style={{ lineHeight: '2rem', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', height: '2rem', padding: '1rem' }}>
                    <h3>数据列表</h3>
                    <div>
                        <Button
                            className='add'
                            onClick={gotoAdd}
                        >
                            添加商品
                        </Button>
                        <Select
                            className='batchOperations'
                            defaultValue="批量操作"
                            onChange={handleChange}
                            options={[
                                { value: 'jack', label: '批量删除' },
                                { value: 'lucy', label: '批量XX' },
                            ]}
                        />
                        <Button
                            onClick={goBack}
                        >
                            返回
                        </Button>
                    </div>
                </div>

                <div style={{ lineHeight: '20rem', }}>
                    <Divider />
                    <Table rowSelection={{
                        type: 'checkbox',
                        ...rowSelection,
                    }}
                        columns={columns}
                        dataSource={data}
                        pagination={{
                            pageSize: 4
                        }} />
                </div>
            </div>
            {/* 删除模态框 */}
            <Modal
                title="删除确定"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                okText={'确定'} cancelText={'取消'}>
                <h3>确定要删除吗？</h3>
            </Modal>
            {/* 查看模态框 */}
            <Modal
                className={'modalBox'}
                title="商品详情"
                open={detailModal}
                onOk={detailOk}
                onCancel={detailCancel}
                okText={'确定'} cancelText={'取消'}
                bodyStyle={{ marginLeft: '15px' }}
            >
                <div className='detailBox'>
                    <div>商品名字：<span>{detailData.productName}</span></div>
                    <div>商品编号：<span>{detailData.productID}</span></div>
                    <div>商品价格：<span>{detailData.productPrice}</span></div>
                    <div>商品品牌：<span>{detailData.productBrand}</span></div>
                    <div>商品颜色：<span>{detailData.productColor}</span></div>
                    <div>商品库存：<span>{detailData.productNum}</span></div>
                </div>
            </Modal>
        </div>
    );
}

export default CommodityHome;